<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>上传图片</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet"
	href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="../bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="../bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- Google Font -->
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<div th:replace="~{admin/templates/header::.main-header}"></div>
		<aside class="main-sidebar"
			th:include="~{admin/templates/aside::.main-sidebar}"
			th:with="onevar='uploadimgs'"></aside>
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>上传图片</h1>
				<ol class="breadcrumb">
					<li><a th:href="@{/admin}"><i class="fa fa-dashboard"></i>首页</a></li>
					<li class="active">上传图片</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-xs-12">
						<div class="box">
							<div class="box-header with-border">
								<h3 class="box-title">图片列表</h3>
							</div>
							<div class="box-body">
								<table class="table table-bordered">
									<tbody>
										<tr>
											<th style="width: 60px">序号</th>
											<th>预览</th>
											<th>地址链接</th>
											<th style="width: 140px">操作</th>
										</tr>
										<tr>
											<td>#</td>
											<td><img id="old" th:src="@{/imgs/noimage.png}"
												src="/imgs/noimage.png" style="width: 200px; height: 120px">
												<img id="new" th:src="@{/imgs/noimage.png}"
												src="/imgs/noimage.png"
												style="width: 200px; height: 120px; display: none"></td>
											<td></td>
											<td>
												<form th:action="@{/admin/saveImage?type=2}"
													th:method="post" enctype="multipart/form-data">
													<div id="choose" class="btn btn-primary"
														style="position: relative; overflow: hidden;">
														<span>选图</span> <input type="file" name="file"
															accept="image/jpeg,image/x-png"
															style="position: absolute; top: 0; right: 0; width: 100%; height: 100%; opacity: 0">
													</div>
													<button id="upload" type="submit" class="btn btn-primary"
														style="display: none">上传</button>
												</form>
											</td>
										</tr>
										<tr th:each="item:${sliderList}">
											<td th:text="${itemStat.index+1}">1</td>
											<td><img th:src="@{${item.pictureUrl}}"
												style="width: 200px; height: 120px"></td>
											<td th:text="${item.pictureUrl}"></td>
											<td>
												<form th:action="@{/admin/updateSlider}" th:method="post"
													enctype="multipart/form-data">
													<button id="upload" type="button" class="btn btn-primary"
														style="display: none">上传</button>
													<a type="button" class="btn btn-danger"
														th:href="@{'/admin/delSlider/'+${item.id}}">删除</a>
												</form>
											</td>
										</tr>

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
	<!-- jQuery 3 -->
	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap 3.3.7 -->
	<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- FastClick -->
	<script src="../bower_components/fastclick/lib/fastclick.js"></script>
	<!-- AdminLTE App -->
	<script src="../dist/js/adminlte.min.js"></script>
	<!-- AdminLTE for demo purposes -->
	<script src="../dist/js/demo.js"></script>
	<!-- CK Editor -->
	<script src="../bower_components/ckeditor/ckeditor.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("input[type=file]").change(function(e) {
				var mTr = $(this).parent().parent().parent().parent();
				var mNew = mTr.find("#new");
				var mOld = mTr.find("#old");
				mOld.css("display", "none");
				mNew.css("display", "inline");
				mTr.find("#choose").css("display", "none");
				mTr.find("#upload").css("display", "inline");
				//图片转url
				var ele = this.files[0];
				var fr = new FileReader();
				fr.onload = function(ele) {
					mNew.attr('src', ele.target.result);
				}
				fr.readAsDataURL(ele)
			})
		})
	</script>
</body>
</html>